<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单品精选</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="../css/aui.2.0.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/alert.css">
    <link rel="stylesheet" href="../css/common1.css">
    <link rel="stylesheet" href="../css/common.css">
<style>
.dis-del-sale{
   display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
</style>
</head>
<body>
<section>
    <header class="aui-bar aui-bar-nav" id="aui-header" style="position:fixed;">
        <div class="aui-col-xs-3 my-col-xs-3">
            <i class="aui-iconfont aui-icon-left"></i>
        </div>
        <div class="aui-title my-aui-title">精选单品</div>
        
    </header>
    <section class="comm-box" style="margin-top:2rem;">
        <div id="dis-list-vessel">
            <script type="text/x-handlebars-template" id="one-product">
                {{#each products}}
                <!--<a href="goodsDetail.html?productId={{id}}" class="display-box">-->
                <a href="goodsdetail.html?productId={{id}}" class="display-box" productid="{{id}}">
					
                    <div class="dis-list-box" data-productid="{{id}}">
						<div class="dis-delss" style="margin-top: 2.2rem;"><input class="aui-checkbox" type="checkbox"  name="checkbox" id="checkboxs" data-productid="{{id}}"></div>
                        <div class="dis-shop-img">
                            <!--<img src="../img/grey.gif" data-src="{{mainImageUrl}}" alt="">-->
                            <img src="../images/lazy.gif" data-src="{{mainImageUrl}}" alt="">
                        </div>
                        <div class="dis-list-content" style="width:55%">
                            <div class="dis-shop-detail">

                                <span class="shop-list-name">{{name}}</span>
                            </div>
                            <div class="dis-price" style="margin-top:0.2rem">
                                <span>友惠价：<b>¥{{productPrice}}</b> / <font style="color:#e51c08">赚</font><b>{{marketProfit}}</b></span>
                                <span>佣金率：<b>{{marketProfitPercent}}%</b></span>
                                <span>销量：{{totalSales}}</span>
                            </div>

                            <div class="dis-del-sale">
                                 
								<div class="dis-sale " style="width:auto;">
                                 <span style="margin-left:0;padding: 0 0.5rem;">红包 {{productHongbao}}元</span>
                                </div>
                                <div class="dis-sale now-tuiguang">
                                    <span >立即分享</span>
                                </div>
                            </div>

                        </div>
                    </div>
                </a>
                {{/each}}
            </script>

            <!--<a href="javascript:;" class="display-box">
                <div class="dis-list-box">
                    <div class="dis-shop-img">
                        <img src="../images/22.jpg" alt="">
                    </div>
                    <div class="dis-list-content">
                        <div class="dis-shop-detail">
                            <span>红包20.00元</span>
                            <span>退货免运费</span>
                            <span>我爱北京天安门我爱北京天安门</span>
                        </div>
                        <div class="dis-price">
                            <span>优惠价:108:00</span>
                            <span>销量：269</span>
                        </div>
                        <div class="dis-evaluate">
                            <span>赚:30.61元</span>
                            <span>佣金率：28.9%</span>
                        </div>
                        <div class="dis-del-sale">
                            <div class="dis-del"></div>
                            <div class="dis-sale">
                                <span>立即分享</span>
                            </div>
                        </div>
                    </div>
                </div>
            </a>-->
        </div>
    </section>
    <div class="loading">加载更多...</div>
    <div class="no-info">没有更多数据了...</div>

</section>
<footer class="aui-bar aui-bar-tab" id="footer1">
	<a style="width:49%;border-right:solid 1px #fff;"><div id="chulibut">发送</div></a>
	<a href="wxmass.html"  style="width:49%;"><div>爆款分享</div></a>
	
</footer>
<!--立即分享-->
<section class="wxmass-sends">
    <section class="wxmass-sends-item">
        
        <!--<div class="wxmass-item-img">
            <img src="../images/banner1.png" alt="">
        </div>-->
        <ul class="wxmass-item-list">
                <li class="share-firends">
                    <div class="wxmass-item-list-img">
                        <img src="../images/wx.png" alt="">
                         <p style="text-align:center;margin-top: 0.1rem;">微信</p>
                    </div>
                   
                </li>
                <li class="share-firends-quan">
                    <div class="wxmass-item-list-img">
                        <img src="../images/friends.png" alt="">
                         <p style="text-align:center;margin-top: 0.1rem;">朋友圈</p>
                    </div>
                    
                </li>
            </ul>
        <div class="wxmass-item-title"> 取消分享</div>
    </section>

</section>
<!--立即分享-->
<section class="wxsend" style="position: fixed;" id="newwxsend">
    <section class="wxmass-sends-items">
       
       
        <ul class="wxmass-item-lists">
            <li id="newsharefirend">
                <div class="wxmass-item-list-imgs">
                    <img src="../images/wx.png" alt="">
                     <p style="text-align:center;">微信</p>
                </div>
            </li>
            <li  id="pyquan">
                <div class="wxmass-item-list-imgs">
                    <img src="../images/friends.png" alt="">
                     <p style="text-align:center;">朋友圈</p>
                </div>  
            </li>
        </ul>
         <div class="wxmass-item-titles">取消分享 </div>
    </section>

</section>
<script src="../js/jquery-3.0.0.min.js"></script>
<script src="../js/api.2.0.js"></script>
<script src="../js/config.js"></script>
<script src="../js/alert.js"></script>
<script src="../js/aui-lazyload.js"></script>
<script src="../js/function.js"></script>
<script src="../js/handlebars-v4.0.10.js"></script>
<script src="../js/common.js"></script>

<!--<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>-->
<script src="../js/selected.js"></script>
<script>
    //获得slider插件对象
//    var gallery = mui('.mui-slider');
//    gallery.slider({
//        interval:5000//自动轮播周期，若为0则不自动播放，默认为0；
//    });
//    设置当前秒杀时间
//    $('.seckillTime ul li').click(function(){
//        $(this).parent().find('a').removeClass('seckillTime-active');
//        $(this).parent().find('p:nth-child(even)').text('即将开始');
//        $(this).find('a').addClass('seckillTime-active');
//        $(this).find('p').eq(1).text('已开枪');
//    })



    /**
     * 判断是iOS或是安卓，改变数据的获取方式
     *
     * */
	 //alert(1);
    var ua = navigator.userAgent.toLowerCase();
    if (/iphone|ipad|ipod/.test(ua)) {
        //alert('iOS的弹窗');
        var data={
            postType:'getToken'
        };
        $("#aui-header").hide();
        $(".comm-box").css("margin-top","0");
        postSuccessToken(data);

    } else {
        //alert('android的弹窗。');
        //postAndroidToken();
    }

    //调用ios获取token方法。
    function postSuccessToken(data) {
    	
        window.webkit.messageHandlers.postSuccessToken.postMessage(data);
    }

    //调用Android获取token方法
    function postAndroidToken() {
        window.getToken();
    }

    function getToken(token) {
        localStorage.setItem('token',token);
        alert('获取到的token为'+token);
    }
</script>
<script>
	
    var num=0,pageLength=5,flag=0,maxnum=0,range=200,start=0;

    var oneProductTpl=$('#one-product').html();
    var oneProductCmp=Handlebars.compile(oneProductTpl);
   
    ajaxgetData();
    //监听滚动高度，加载数据
    $(window).on('scroll',function () {
        var srollPos = $(window).scrollTop(); //滚动条距顶部距离(页面超出窗口的高度)
        //console.log("滚动条到顶部的垂直高度: " + $(document).scrollTop());
        //console.log("页面的文档高度 ："+$(document).height());
        //console.log('浏览器的高度：'+$(window).height());
        totalheight = parseFloat($(window).height()) + parseFloat(srollPos);
        
       // console.log(total)
        if (num>=maxnum){
            return;
        }
        if (($(document).height()-range)<=totalheight&&num<maxnum){
            //这里不能使用模板填充，应该是append()....
            ajaxgetData();
           
        }
    });
    $(function(){
    	
    	batevrtn();
    })
    
    function batchevent(event){
    	
         var flag=0;
     	var vals;
     	$(".dis-delss .aui-checkbox:checked").each(function(key,val){
     		flag++;
     		
     		vals = val;
     	});
     	if(flag>9){
     		dialog.tusiError("不能选择更多了！！");
     		$(vals).prop("checked", false); 
     		
     	}
    }
    //发送事件
    function batevrtn(){
    	$("#chulibut").click(function(){
			var  id= "";
			
			$(".dis-delss .aui-checkbox:checked").each(function(key,val){
					id += ','+$(this).attr("data-productid");
					 if (id.substr(0,1)==',') 
							id=id.substr(1);
				
				//console.log($(this).attr("data-productid"));
				 
			})
			$("#chulibut").attr('data_id',id);
			console.log('22'+id);
		})
		
    }
	//群发处理
		/* 
	var ss = false;
	function batchevent(){
    	if(ss){
    		return;
    	}
    	var flag = 0;
    	$(".aui-checkbox").click(function(){
    		
    		
			$(".dis-del .aui-checkbox:checked").each(function(key,val){
				
			if(key>3){
					
					ss;
					
				} 
				flag++;
			})
			
			
			if(flag>3){
				alert("不能选择过多的商品！");
			}
			
		})
		
		
    	/* var id = "";
		$("#chulibut").click(function(){
			$(".dis-del .aui-checkbox").attr('checked','checked');
			
			$(".dis-del .aui-checkbox:checked").each(function(){
				 id += ','+$(this).attr("data-productid");
				console.log($(this).attr("data-productid"));
				if (id.substr(0,1)==',') 
					id=id.substr(1);
			})
			
			console.log(id);
		}) 
		
		$("#chulibut").click(function(){
			var  id= "";
			
			$(".dis-del .aui-checkbox:checked").each(function(key,val){
				
				
					id += ','+$(this).attr("data-productid");
					 if (id.substr(0,1)==',') 
							id=id.substr(1);
					
				
				//console.log($(this).attr("data-productid"));
				 
			})
			console.log('22'+id);
		})
		
		
		
		
	}*/
	/**/
    function ajaxgetData() {
        if (flag){
            return;
        }
        $('.no-info').hide();
        $('.loading').show();
        flag=1;
        $.ajax({
            url:C.interface.discount,
            type:'get',
            dataType:'json',
            data:{
                start:start,
                length:pageLength
            },
            success:function (response) {
                if (response.result=='success'){
                	
                    $('.loading').hide();
                    num++;
                    var data=response.data;
                    maxnum=data['productCount'];
                    start=num*pageLength;
                    if (maxnum==0){
                        $('.no-info').show();
                    }
                    if (data.products.length>0){
                        $('#dis-list-vessel').append(oneProductCmp(data));
                        var ua = navigator.userAgent.toLowerCase();
                        if (/iphone|ipad|ipod/.test(ua)) {

                        	 $('.display-box').attr('href','javascript:void(0)');
                        	 var id = $(this).attr('data-productid');
                        	 
                        	 $(".display-box").bind('click',detailevent);
                        		
                        		
                        }else{
                        	
                        }
                        
                        new auiLazyload({
                            errorImage:'../images/error-img.png'
                        });

                    }else {
                        $('.no-info').show();
                        num=maxnum+1;
                    }
                    flag=0;

                    //这里添加立即分享事件
                    $('.dis-sale ').bind('click',nowTuiGuang);
                    $('.aui-checkbox').bind('click',batchevent);
                    $('#chulibut').bind('click',sendcon);
                    
                }else {
                	dialog.tusiError(response.errorMsg);

                }
            }
        })
    }
	//立即分享
	function detailevent(event){
		var that=$(this);
        var shareProductId=that.attr('productid');
        var data={
                postType:'adddetail',
                id:shareProductId
            };
        detailmain(data);
	}
	function detailmain(parm){
		window.webkit.messageHandlers.addDteail.postMessage(parm);
	}
    //立即分享
    function nowTuiGuang(event) {
        event.preventDefault();
        event.stopPropagation();
        var loading=dialog.loading();
        var that=$(this);
        var thisPapa=that.parents('.dis-list-box');
        var thisImg=thisPapa.find('.dis-shop-img').find('img').attr('src');
        var shareProductId=thisPapa.data('productid');
        localStorage.setItem('shareId',shareProductId);

        var productId=localStorage.getItem('shareId');
        var token = localStorage.getItem('token');
        console.log(token);
        $.ajax({
            url:C.marketInterface.shareFriend,
            type:'get',
            dataType:'json',
            data:{
                token:token,
                productId:productId
            },
            complete:function () {
                loading.close();
            },
            success:function (response) {
                if (response.result=='success'){
                    //console.log(response.data);
                    var imgUrl=response.data.imgUrl;
                    var url=response.data.url;
                    var title=response.data.title;
                    var content=response.data.content;

                    $('.wxmass-item-img').find('img').attr('src',thisImg);
                    $('.wxmass-sends').show();

                    $('.share-firends').one('click',function (event) {
                        getShareData(event,'1');
                    });

                    $('.share-firends-quan').one('click',function (event) {
                        getShareData(event,'2');
                    });

                    $('.share-QQ').bind('click',function (event) {
                        getShareData(event, '3');
                    });
                    $('.share-weibo').bind('click',function (event) {
                        getShareData('event','4');
                    });

                    function getShareData(event, type) {
                        var data={
                            postType:'shareProducts',
                            productId:productId,
                            type:type,
                            url:url,
                            imgUrl:String(imgUrl),
                            title:title,
                            content:content
                        };
                        console.log(data);
                        var ua = navigator.userAgent.toLowerCase();
                        if (/iphone|ipad|ipod/.test(ua)) {

                            iosShare(data);
                            event.stopPropagation();
                        } else {
                            //console.log(JSON.stringify(data));
                            androidShare(JSON.stringify(data));
                            event.stopPropagation();
                        }
                    }
                    

                }else if (response.result=='login'){
                	dialog.tusiError('登入过期，请重新登入！');
                    againLogin();
                }else {
                	dialog.tusiError(response.errorMsg);
                }
            },
            error:function () {
                //alert('服务器异常');
            }
        });

    }

    //分享朋友圈
    function shareFrends(event,type) {
        event.stopPropagation();

        var productId=localStorage.getItem('shareId');
        $.ajax({
            url:C.marketInterface.shareFriend,
            type:'get',
            dataType:'json',
            data:{
                token:token,
                productId:productId
            },
            success:function (response) {
                if (response.result=='success'){
                    //console.log(response.data);
                    var imgUrl=response.data.imgUrl;
                    var url=response.data.url;
                    var title=response.data.title;
                    var content=response.data.content;
                    var data={
                        postType:'shareProducts',
                        productId:productId,
                        type:type,
                        url:url,
                        imgUrl:'',
                        title:title,
                        content:content
                    };
                    console.log(data);
                    var ua = navigator.userAgent.toLowerCase();
                    if (/iphone|ipad|ipod/.test(ua)) {

                        iosShare(data);
                        event.stopPropagation();
                    } else {
                        //console.log(JSON.stringify(data));
                        androidShare(JSON.stringify(data));
                        event.stopPropagation();
                    }
                }else if (response.result=='login'){
                	dialog.tusiError('登入过期，请重新登入！');
                    againLogin();
                }else {
                	dialog.tusiError(response.errorMsg);
                }
            },
            error:function () {
                //alert('服务器异常');
            }
        });

    }

    //拉取安卓分享
    function androidShare(param) {
        //alert(param);
        window.huifa.shareProducts(param);
    }
    //拉取iOS分享

    function iosShare(param) {
        window.webkit.messageHandlers.shareProducts.postMessage(param);
    }

    $('.wxmass-item-title').click(function () {
        $('.wxmass-sends').toggle();
    });


    $(document).ready(function () {
		
    })
     /*********
   
    20171024
    
    ********/
	//群发内容
	function sendcon(event){
    	 event.preventDefault();
         event.stopPropagation();
    	$('#newwxsend').show();
    	 var id = $("#chulibut").attr('data_id');
    	 
    	
    	 $(".wxmass-item-titles").click(function(){
    		
    		 $(".wxsend").hide();
    	 })
    	 $("#newsharefirend").click(function(event){
    		 addgetShareData(event,'1');
    	 })
    	 
          $('#pyquan').one('click',function (event) {
        	  addgetShareDatas(event,'2');
          });
    	 


    }
    function addgetShareData(event, type) {
    	 event.preventDefault();
         event.stopPropagation();
         var id = $("#chulibut").attr('data_id');
        var data={
       		 id:id,
       		 type:type,
       		 postType:'batchShares'
        };
        console.log(data);
        var ua = navigator.userAgent.toLowerCase();
        if (/iphone|ipad|ipod/.test(ua)) {

        	iosBatchShare(data);
            event.stopPropagation();
        } else {
            //console.log(JSON.stringify(data));
            androidBatchShares(JSON.stringify(data));
            event.stopPropagation();
        }
    }
    
    function addgetShareDatas(event, type) {
   	 	event.preventDefault();
        event.stopPropagation();
        var id = $("#chulibut").attr('data_id');
       var data={
      		 id:id,
      		type:type,
      		 postType:'shareFriendQuans'
       };
       console.log(data);
       var ua = navigator.userAgent.toLowerCase();
       if (/iphone|ipad|ipod/.test(ua)) {
    	   iosFriendQuans(data);
          // iosBatchShare(data);
           event.stopPropagation();
       } else {
           //console.log(JSON.stringify(data));
           shareFriendQuans(JSON.stringify(data));
           event.stopPropagation();
       }
   }
   
    
    //安卓拉取分享
    function androidBatchShares(param) {
        window.huifa.batchShares(param);
    }
  //安卓拉取分享
    function shareFriendQuans(param) {
        window.huifa.shareFriendQuans(param);
    }
  
    //iOS拉取分享朋友圈
    function iosFriendQuans(param) {
 	   window.webkit.messageHandlers.shareFriendQuans.postMessage(param);
     } 
 	//ios分享朋友
 	function iosBatchShare(param){
 		 window.webkit.messageHandlers.batchShares.postMessage(param);
 	}

</script>
</body>
</html>